import { NButton, NCheckbox } from 'naive-ui'
import { useProTableState } from '@/components/tables/pro-table/context'

/**
 * @FILENAME:  setting-header.tsx
 *  @Description:  // 设置header部分
 * @Author: ellwood
 * @CreateDate: 2024/11/7 - 14:58
 * @Version: V1.0.0
 */
const settingHeader = defineComponent({
  name: 'SettingHeader',
  setup() {
    const state = useProTableState()
    return () => {
      const checkboxProps = {
        'onUpdate:checked': state?.settingColumn?.handleCheckAll,
      }
      return (
        <div class="flex justify-between w-[240px] py-1.5 px-6">
          <div>
            <NCheckbox
              {...checkboxProps}
              checked={state.settingColumn?.isAllChecked?.value}
              indeterminate={state.settingColumn?.indeterminate?.value}
            />
            <span class="ml-1.5">列展示</span>
          </div>
          <NButton text type="primary" onClick={state?.settingColumn?.init}>
            重置
          </NButton>
        </div>
      )
    }
  },
})

export default settingHeader
